<template>
  <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog" :width="dialogWidth" :top="dialogTop"
    :bottom="dialogBottom">
    <el-form :model="addPadNewsForm" ref="addPadNewsRef" :rules="addPadNewsrules">
      <el-form-item label="新闻标题" :label-width="formLabelWidth" prop="title">
        <el-input v-model="addPadNewsForm.title" autocomplete="off" ref="name" placeholder="请填写新闻标题"></el-input>
      </el-form-item>

      <el-form-item label="新闻权重" :label-width="formLabelWidth" prop="sortNum">
        <el-input v-model="addPadNewsForm.sortNum" autocomplete="off" type="number" ref="name" value="100"
          placeholder="请填写排序"></el-input>
      </el-form-item>
      <!-- <el-form-item
        label="封面图片"
        :label-width="formLabelWidth"
        prop="imageUrl"
      >
        <el-input
          v-model="addPadNewsForm.imageUrl"
          autocomplete="off"
          ref="name"
          placeholder="请填写封面图片"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="起止时间" prop="duration" :label-width="formLabelWidth">
        <el-date-picker v-model="addPadNewsForm.duration" type="daterange" range-separator="至" start-placeholder="开始时间"
          end-placeholder="结束时间" value-format="YYYY-MM-DD" :size="large" />
      </el-form-item>
      <!-- <el-form-item
        label="开始时间"
        :label-width="formLabelWidth"
        prop="startTime"
      >
        <el-input
          v-model="addPadNewsForm.startTime"
          autocomplete="off"
          ref="name"
          placeholder="请填写开始时间"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="结束时间"
        :label-width="formLabelWidth"
        prop="endTime"
      >
        <el-input
          v-model="addPadNewsForm.endTime"
          autocomplete="off"
          ref="name"
          placeholder="请填写结束时间"
        ></el-input>
      </el-form-item> -->
      <el-form-item label="新闻内容" :label-width="formLabelWidth" prop="content">
        <Editor v-model="contentValue" :init="init" :disabled="disabled" @onClick="onClick" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { ref } from "vue";
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm } from "element-plus";
import { vxRule } from "@/utils/validator";
//富文本
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
export default {
  name: "AddPadNews",
  components: { ElForm, ElMessage, Editor },
  mounted() {
  },
  watch: {
    value(newValue) {
      this.contentValue = newValue;
      this.addPadNewsForm.content = this.contentValue;
    },
    contentValue(newValue) {
      this.$emit("input", newValue);
    },
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default:
        "print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern autosave ",
    },
    toolbar: {
      type: [String, Array],
      default:
        "fullscreen undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
                styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
                table image media charmap emoticons hr pagebreak insertdatetime print preview | code selectall | indent2em lineheight formatpainter axupimgs",
    },
  },
  data() {
    return {
      dialogWidth: "80%",
      dialogTop: '0',
      dialogBottom: '0',
      init: {
        language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件
        language: "zh_CN", //语言类型
        skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色
        // skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色
        plugins: this.plugins, //插件配置
        toolbar: this.toolbar, //工具栏配置，设为false则隐藏
        // menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”
        fontsize_formats:
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小
        font_formats:
          "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",
        height: 500, //注：引入autoresize插件时，此属性失效
        width: "100%",
        placeholder: "在这里输入文字",
        branding: false, //tiny技术支持信息是否显示
        resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
        // statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示
        elementpath: false, //元素路径是否显示

        content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式
        // content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
        // images_upload_url: '/demo/upimg.php',  //后端处理程序的url
        // images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php
        // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // images_upload_handler: (blobInfo, success, failure) => {
        //   const img = "data:image/jpeg;base64," + blobInfo.base64();
        //   success(img);
        // },
      },
      contentValue: "",
      dialogFormVisible: ref(false),
      formLabelWidth: "120px",
      title: "",
      personnelType: "",
      addPadNewsForm: {
        title: "",
        duration: [],
        content: "",
        sortNum: "100",
        imageUrl: "",
        publishTime: "",
        publishUser: "",
        startTime: "",
        endTime: "",
        updateTime: "",
        createTime: "",
        createNumber: "",
        createName: "",
        laseUpdateNumber: "",
        laseUpdateName: "",
      },
      // 校验规则
      addPadNewsrules: {
        title: vxRule(true, null, "blur"),
        duration: vxRule(true, null, "blur"),
        sortNum: vxRule(true, null, "blur"),
        content: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    initTinymce() {
      tinymce.init({});
    },
    closeDialog() {
      this.clear();
    },
    cancel() {
      this.dialogFormVisible = false;
      this.clear();
    },
    getPadNewsById(id) {
      httpService("/javaApi/padNews/queryById", { id: id }, "get").then(
        (data) => {
          this.addPadNewsForm = data;
          this.contentValue = data.content;

          this.addPadNewsForm.duration = [data.startTime, data.endTime];

          console.log(this.addPadNewsForm.duration)

        }
      );
    },
    onClick(e) {
      this.$emit("onClick", e, tinymce);
    },
    clear() {
      this.dialogFormVisible = false;
      //清空form
      this.addPadNewsForm.id = "";
      this.addPadNewsForm.title = "";
      this.addPadNewsForm.content = "";
      this.addPadNewsForm.sortNum = "100";
      this.addPadNewsForm.imageUrl = "";
      this.addPadNewsForm.publishTime = "";
      this.addPadNewsForm.publishUser = "";
      this.addPadNewsForm.startTime = "";
      this.addPadNewsForm.endTime = "";
      this.addPadNewsForm.updateTime = "";
      this.addPadNewsForm.createTime = "";
      this.addPadNewsForm.createNumber = "";
      this.addPadNewsForm.createName = "";
      this.addPadNewsForm.laseUpdateNumber = "";
      this.addPadNewsForm.laseUpdateName = "";
      this.addPadNewsForm.duration = [];
      this.contentValue = "";
    },
    save() {
      this.addPadNewsForm.content = this.contentValue;
      this.$refs.addPadNewsRef.validate((valid) => {
        if (valid) {
          let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
          params.append("title", this.addPadNewsForm.title);
          params.append("content", this.addPadNewsForm.content);
          params.append("sortNum", this.addPadNewsForm.sortNum);
          params.append(
            "startTime",
            this.addPadNewsForm.duration[0] + " 00:00:00"
          );
          params.append(
            "endTime",
            this.addPadNewsForm.duration[1] + " 00:00:00"
          );
          if (this.addPadNewsForm.id) {
            params.append("id", this.addPadNewsForm.id);
            httpService("/javaApi/padNews/edit", params, "post").then(
              (data) => {
                if (data.code == 200) {
                  ElMessage.success("修改成功");
                  this.clear();
                  //刷新父组件的数据
                  this.$parent.getPadNewsList();
                } else {
                  ElMessage.error("修改失败");
                }
              }
            );
          } else {
            httpService("/javaApi/padNews/add", params, "post").then((data) => {
              if (data.code == 200) {
                ElMessage.success("添加成功");
                this.clear();
                //刷新父组件的数据
                this.$parent.getPadNewsList();
              } else {
                ElMessage.error("添加失败");
              }
            });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
.tox-tinymce-aux {
  z-index: 9999 !important;
}
</style>